<template>
    <footer style="z-index: 88;" id='nav-h'>
      <ul style="margin: 0.6rem;">
        <router-link to='/verted/cinema' custom v-slot="{navigate,isActive}">
            <li :class="isActive? 'myclass':''" @click="navigate" >
              <!-- 这一句引用的阿里库，素材在public文件夹里，在index文件中导入 **重要**-->
              <span class="iconfont">&#xe613;</span>
              <span>影院</span>
            </li>
          </router-link>

          <router-link to='/verted/user' custom v-slot="{navigate,isActive}">
            <li :class="isActive? 'myclass':''" @click="navigate" >
              <span class="iconfont">&#xe615;</span>
              <span>我的</span>
            </li>
          </router-link>
      </ul>
    </footer>
</template>


<style lang='scss' scoped>
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .myclass{
    color:blue;;
  }

  footer {
    position: absolute;
    bottom: 0;
    // left: 0;
    width: 100%;
    height: 3.2rem;
    background:powderblue;
    ul{
      display: flex;
      list-style: none;
      li{
        flex: 1;
        line-height: 1.4rem;
        text-align:center;
        // 下面是将内容竖向显示
        // display: flex;
        // flex-direction: column;

      }
    }
  }
</style>